<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 2 | 文档</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css">
  <link rel="stylesheet" href="style.css">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- 警告：Respond.js 不支持 file:// 方式查看（即本地方式查看）-->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="skin-blue" data-spy="scroll" data-target="#scrollspy">
<div class="wrapper">

  <header class="main-header">
    <!-- Logo -->
    <a href="../index2.html" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>A</b>LT</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg"><b>Admin</b>LTE</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top" role="navigation">
      <!-- Sidebar toggle button-->
      <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
        <span class="sr-only">切换导航</span>
      </a>
      <!-- Navbar Right Menu -->
      <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">
          <li><a href="https://adminlte.io">Almsaeed Studio</a></li>
          <li><a href="https://adminlte.io/premium">Premium Templates</a></li>
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <div class="sidebar" id="scrollspy">

      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="nav sidebar-menu">
        <li class="header">目录</li>
        <li class="active"><a href="#introduction"><i class="fa fa-circle-o"></i> 介绍</a></li>
        <li><a href="#download"><i class="fa fa-circle-o"></i> 下载</a></li>
        <li><a href="#dependencies"><i class="fa fa-circle-o"></i> 依赖</a></li>
        <li><a href="#advice"><i class="fa fa-circle-o"></i> 建议</a></li>
        <li><a href="#layout"><i class="fa fa-circle-o"></i> 布局</a></li>
        <li><a href="#adminlte-options"><i class="fa fa-circle-o"></i> Javascript 设置</a></li>
        <li class="treeview" id="scrollspy-components">
          <a href="javascript:void(0)"><i class="fa fa-circle-o"></i> 组件</a>
          <ul class="nav treeview-menu">
            <li><a href="#component-main-header">主标题</a></li>
            <li><a href="#component-sidebar">侧边栏</a></li>
            <li><a href="#component-control-sidebar">控制栏</a></li>
            <li><a href="#component-info-box">信息框</a></li>
            <li><a href="#component-box">盒子</a></li>
            <li><a href="#component-direct-chat">聊天</a></li>
          </ul>
        </li>
        <li><a href="#plugins"><i class="fa fa-circle-o"></i> 插件</a></li>
        <li><a href="#browsers"><i class="fa fa-circle-o"></i> 浏览器支持</a></li>
        <li><a href="#upgrade"><i class="fa fa-circle-o"></i> 升级指南</a></li>
        <li><a href="#implementations"><i class="fa fa-circle-o"></i> 实现</a></li>
        <li><a href="#faq"><i class="fa fa-circle-o"></i> 常问问题</a></li>
        <li><a href="#license"><i class="fa fa-circle-o"></i> 许可证</a></li>
      </ul>
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (页眉) -->
    <div class="content-header">
      <h1>
        AdminLTE 文档
        <small>Version 2.3</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li class="active">文档</li>
      </ol>
    </div>

    <!-- Main content -->
    <div class="content body">
      <p class="lead">
        This documentation is for versions 2.3 and under.
        If you are looking for documentation for version 2.4 and above,
        please visit <a href="https://adminlte.io/docs">our online documentation</a>.
      </p>

      <section id="introduction">
        <h2 class="page-header"><a href="#introduction">介绍</a></h2>
        <p class="lead">
          <b>AdminLTE</b> 是一个流行开源的后台管理框架。
          基于Bootstrap 3 响应式 HTML 模板。
          在设计中使用了所有Bootstrap组件，
          并重新编写了许多常用的插件，
          以创建一个可以用作后端程序的用户界面。
          AdminLTE 基于模块化的设计，使得它可以轻松地定制和构建。
          本文档将指导您安装及如何使用各种组件。
        </p>
      </section><!-- /#introduction -->


      <!-- ============================================================= -->

      <section id="download">
        <h2 class="page-header"><a href="#download">下载</a></h2>
        <p class="lead">
          AdminLTE提供了两种版本，你可以根据需要下载，以适应你的要求。
        </p>
        <div class="row">
          <div class="col-sm-6">
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">已编译版</h3>
                <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
              </div><!-- /.box-header -->
              <div class="box-body">
                <p>已编译的，并且准备在生产中使用。如果你不需要 AdminLTE LESS 文件，请下载此版本。</p>
                <a href="https://adminlte.io/download/AdminLTE-dist" class="btn btn-primary"><i class="fa fa-download"></i> 下载</a>
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div><!-- /.col -->
          <div class="col-sm-6">
            <div class="box box-danger">
              <div class="box-header with-border">
                <h3 class="box-title">源码版</h3>
                <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
              </div><!-- /.box-header -->
              <div class="box-body">
                <p>所有文件，包含已编译CSS文件，如果你需要自定义模板，请下载此版本。<b>需要 LESS 编译器。</b></p>
                <a href="https://adminlte.io/download/AdminLTE" class="btn btn-danger"><i class="fa fa-download"></i> 下载</a>
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div><!-- /.col -->
        </div><!-- /.row -->
        <pre class="hierarchy bring-up"><code class="language-bash" data-lang="bash">源代码包中的文件层次结构

      AdminLTE/
      ├── dist/
      │   ├── CSS/
      │   ├── JS
      │   ├── img
      ├── build/
      │   ├── less/
      │   │   ├── AdminLTE's Less 文件
      │   └── Bootstrap-less/（仅供参考，未进行任何修改）
      │       ├── mixins/
      │       ├── variables.less
      │       ├── mixins.less
      └── plugins/
          ├── 自定义插件 CSS，JS 文件</code></pre>
      </section>


      <!-- ============================================================= -->

      <section id="dependencies">
        <h2 class="page-header"><a href="#dependencies">依赖</a></h2>
        <p class="lead">AdminLTE依赖于两个主要框架。
          下载包中包含这两个库，所以你不需要手动下载它们。</p>
        <ul class="bring-up">
          <li><a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a></li>
          <li><a href="http://jquery.com/" target="_blank">jQuery 1.11+</a></li>
          <li><a href="#plugins">下面列出了其他的所有插件</a></li>
        </ul>
      </section>


      <!-- ============================================================= -->

      <section id="advice">
        <h2 class="page-header"><a href="#advice">忠告</a></h2>
        <p class="lead">
          在你去看新主题之前，这里有些实用技巧：
        </p>

        <ul>
          <li><b>AdminLTE 基于<a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a>。</b> 如果你不熟悉 Bootstrap，请访问其网站并阅读文档。所有 Bootstrap 组件都被修改过以适用于AdminLTE风格，统一的模板风格将保证您获得最好的AdminLTE。</li>
          <li><b>浏览与主题相关的页面。</b> 大多数模板示例都包含了如何创建和使用组件；当你需要创建某些内容时，这将会很有用。</li>
          <li><b>文档。</b> 我们正在努力让您使用AdminLTE更方便。实现这一目标的方法是提供支持文档。如果您认为文档中缺少某些内容，不要犹豫，创建一个问题（issue）来告诉我们。</li>
          <li><b>内置<a href="http://lesscss.org/" target="_blank">LESS</a>。</b> 主题使用 LESS 编译器使它更易于自定义和使用。如果你知道CSS或SASS的话，LESS很容易学习；学习 LESS这会让你在以后受益匪浅。</li>
          <li><b>托管在GitHub上<a href="https://github.com/almasaeed2010/AdminLTE/" target="_blank">GitHub</a>。</b>访问我们的GitHub仓库，查看问题，请求或贡献项目。</li>
        </ul>
        <p>
          <b>提示：</b>LESS文件中的注释好于编译过的CSS文件。
        </p>
      </section>


      <!-- ============================================================= -->

      <section id="layout">
        <h2 class="page-header"><a href="#layout">布局</a></h2>
        <p class="lead">布局由四个主要部分组成：</p>
        <ul>
          <li>包裹 <code>.wrapper</code>。包裹整站的 div 标签。</li>
          <li>主标题 <code>.main-header</code>。包含LOGO和导航。</li>
          <li>侧边栏 <code>.sidebar-wrapper</code>。包含用户面板和侧边栏菜单。</li>
          <li>内容 <code>.content-wrapper</code>。包含页标题和内容。</li>
        </ul>
        <div class="callout callout-danger lead">
          <h4>提示！</h4>
          <p>如果你想从头开始，<a href="../starter.html">起始页</a>是构建应用程序的好地方。</p>
        </div>

        <h3>布局设置</h3>
        <p class="lead">AdminLTE 2.0提供了一组应用于布局的选项。
          这将些类添加body标签中，以得到想要的效果。</p>
        <ul>
          <li><b>固定：</b> 使用类 <code>.fixed</code>将固定页眉和侧边栏。</li>
          <li><b>折叠侧边栏：</b> 使用类 <code>.sidebar-collapse</code>将在加载时折叠侧边栏。</li>
          <li><b>盒子布局：</b> 使用类 <code>.layout-boxed</code>将得到 1250px的盒子布局。</li>
          <li><b>顶部导航</b> 使用类 <code>.layout-top-nav</code>将移除侧边栏，并将你的链接移到顶部导航栏。</li>
        </ul>
        <p><b>提示：</b>除了，不能将 layout-boxed 和 fixed 混用外，其他的都可以。</p>

        <h3>皮肤</h3>
        <p class="lead">皮肤可以在 dist/css/skins 目录中找到。
          Choose the skin file that you want and then add the appropriate
          下面是可用外观的列表：</p>
        <div class="box box-solid" style="max-width: 300px;">
          <div class="box-body no-padding">
            <table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
              <thead>
                <tr>
                  <th style="width: 210px;">皮肤类</th>
                  <th>预览</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td><code>skin-blue</code></td>
                  <td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-blue-light</code></td>
                  <td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-yellow</code></td>
                  <td><a href="#" data-skin="skin-yellow" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-yellow-light</code></td>
                  <td><a href="#" data-skin="skin-yellow-light" class="btn btn-warning btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-green</code></td>
                  <td><a href="#" data-skin="skin-green" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-green-light</code></td>
                  <td><a href="#" data-skin="skin-green-light" class="btn btn-success btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-purple</code></td>
                  <td><a href="#" data-skin="skin-purple" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-purple-light</code></td>
                  <td><a href="#" data-skin="skin-purple-light" class="btn bg-purple btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-red</code></td>
                  <td><a href="#" data-skin="skin-red" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-red-light</code></td>
                  <td><a href="#" data-skin="skin-red-light" class="btn btn-danger btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-black</code></td>
                  <td><a href="#" data-skin="skin-black" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
                <tr>
                  <td><code>skin-black-light</code></td>
                  <td><a href="#" data-skin="skin-black-light" class="btn bg-black btn-xs"><i class="fa fa-eye"></i></a></td>
                </tr>
              </tbody>
            </table>
          </div><!-- /.box-body -->
        </div><!-- /.box -->
      </section>


      <!-- ============================================================= -->

      <section id="adminlte-options">
        <h2 class="page-header"><a href="#adminlte-options">AdminLTE Javascript 设置</a></h2>
        <p class="lead">通过修改app.js文件，来配置AdminLTE。方法如下：</p>

        <h3>编辑 app.js</h3>
        <p>在JS文件中修改<code>$.AdminLTE.options</code> 对象以适用你的项目。</p>

        <h3>定义 AdminLTEOptions</h3>
        <p>或者，您可以定义一个名为<code>AdminLTEOptions</code>全局变量，并在加载 app.js 之前对其进行初始化。</p>
        <p>示例</p>
        <pre class="prettyprint"><code class="html">&LT;script>
        var AdminLTEOptions = {
          //启用迷你侧边栏并固定
          //如果固定布局和迷你侧边栏启用，
          //则此选项被强制为真
          sidebarExpandOnHover: true,
          //BoxRefresh 插件
          enableBoxRefresh: true,
          //Bootstrap.js 提示工具
          enableBSToppltip: true
        };
      &LT;/script>
      &LT;script src="dist/js/app.js" type="text/javascript">&LT;/script></code></pre>

        <h3>AdminLTE 可用选项</h3>
        <pre class="prettyprint"><code class="javascript">{
        //将 slimscroll 添加到导航栏菜单
        //你需要加载 slimscroll 插件
        //在所有页面前加载 app.js
        navbarMenuSlimscroll: true,
        navbarMenuSlimscrollWidth: "3px", //滚动条的宽度
        navbarMenuHeight: "200px", //内部菜单的高度
        //一般为JS动画速度，如框折叠/展开和侧边栏向上/向下滑动。
        //sidebar treeview slide up/down. This option accepts an integer as milliseconds,
        //或者使用 'fast', 'normal', 或 'slow'
        animationSpeed: 500,
        //侧边栏菜单按钮选择器
        sidebarToggleSelector: "[data-toggle='offcanvas']",
        // 激活侧边栏推菜单
        sidebarPushMenu: true,
        //激活边栏（需要SlimScroll插件）
        sidebarSlimScroll: true,
        //启用迷你侧边栏并固定
        //如果固定布局和迷你侧边栏启用，
        //则此选项被强制为真
        sidebarExpandOnHover: false,
        //BoxRefresh 插件
        enableBoxRefresh: true,
        //Bootstrap.js 提示工具
        enableBSToppltip: true,
        BSTooltipSelector: "[data-toggle='tooltip']",
        //启用快速单击。
        Fastclick 让触摸设备拥有等同于本地的触摸体验。
        //如果您选择启用该插件，
        //请确保在 AdminLTE app.js 前加载了该脚本
        enableFastclick: true,
        //控制栏树视图
        enableControlTreeView: true,
        //控制栏配置
        enableControlSidebar: true,
        controlSidebarOptions: {
          //哪个按钮触发打开/关闭事件
          toggleBtnSelector: "[data-toggle='control-sidebar']",
          //侧边栏选择器
          selector: ".control-sidebar",
          //启用幻灯片内容
          slide: true
        },
        //Box 小部件插件。启用这个插件
        //允许折叠和（或）删除
        enableBoxWidget: true,
        //Box 小部件配置
        boxWidgetOptions: {
          boxWidgetIcons: {
            //折叠图标
            collapse: 'fa-minus',
            //展开图标
            open: 'fa-plus',
            //删除图标
            remove: 'fa-times'
          },
          boxWidgetSelectors: {
            //删除按钮选择器
            remove: '[data-widget="remove"]',
            //折叠按钮选择器
            collapse: '[data-widget="collapse"]'
          }
        },
        //聊天插件配置
        directChat: {
          //默认启用聊天
          enable: true,
          //这个选择器用于控制打开或关闭联系人面板
          contactToggleSelector: '[data-widget="chat-pane-toggle"]'
        },
        //定义一组在网站上使用的颜色
        colors: {
          lightBlue: "#3c8dbc",
          red: "#f56954",
          green: "#00a65a",
          aqua: "#00c0ef",
          yellow: "#f39c12",
          blue: "#0073b7",
          navy: "#001F3F",
          teal: "#39CCCC",
          olive: "#3D9970",
          lime: "#01FF70",
          orange: "#FF851B",
          fuchsia: "#F012BE",
          purple: "#8E24AA",
          maroon: "#D81B60",
          black: "#222222",
          gray: "#d2d6de"
        },
        //bootstrap使用的标准屏幕大小。
        //如果你修改了variables.less 文件，
        //需要同步修改这里。
        screenSizes: {
          xs: 480,
          sm: 768,
          md: 992,
          lg: 1200
        }
      }</code></pre>
      </section>


      <!-- ============================================================= -->

      <section id="components" data-spy="scroll" data-target="#scrollspy-components">
        <h2 class="page-header"><a href="#components">组件</a></h2>
        <div class="callout callout-info lead">
          <h4>提醒！</h4>
          <p>
            AdminLTE使用所有Bootstrap 3组件。
            查看<a href="http://getbootstrap.com">Bootstrap 文档</a>以了解本文档<b>不包含</b>的各种组件，
            这将是个很好的开始。
          </p>
        </div>
        <div class="callout callout-danger lead">
          <h4>提示！</h4>
          <p>
            如果复制这些组件，
            请右击组件，并选择“检查元素”
            这将比查看源码要快得多。
          </p>
        </div>
        <h3 id="component-main-header">主标题</h3>
        <p class="lead">主标题包含LOGO导航。
          导航栏与Bootstrap略有不同，它有Bootstrap不提供的组件。
          The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide an example for
          接下来我们将提供顶部导航布局的示例。
        <div class="box box-solid">
          <div class="box-body" style="position: relative;">
            <span class="eg">主标题示例</span>
            <header class="main-header" style="position: relative;">
              <!-- Logo -->
              <a href="index2.html" class="logo" style="position: relative;"><b>Admin</b>LTE</a>
              <!-- Header Navbar: style can be found in header.less -->
              <nav class="navbar" role="navigation" style="border: 0;max-height: 50px;">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" role="button">
                  <span class="sr-only">切换导航</span>
                </a>
                <!-- Navbar Right Menu -->
                <div class="navbar-custom-menu">
                  <ul class="nav navbar-nav">
                    <!-- Messages: style can be found in dropdown.less-->
                    <li class="dropdown messages-menu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-envelope-o"></i>
                        <span class="label label-success">4</span>
                      </a>
                      <ul class="dropdown-menu">
                        <li class="header">你有 4 条消息</li>
                        <li>
                          <!-- inner menu: contains the actual data -->
                          <ul class="menu">
                            <li><!-- start message -->
                              <a href="#">
                                <div class="pull-left">
                                  <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="用户图像">
                                </div>
                                <h4>
                                  支持团队
                                  <small><i class="fa fa-clock-o"></i> 5 分钟前</small>
                                </h4>
                                <p>为什么不购买一个高级模板主题？</p>
                              </a>
                            </li><!-- end message -->
                          </ul>
                        </li>
                        <li class="footer"><a href="#">查看所有消息</a></li>
                      </ul>
                    </li>
                    <!-- Notifications: style can be found in dropdown.less -->
                    <li class="dropdown notifications-menu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-bell-o"></i>
                        <span class="label label-warning">10</span>
                      </a>
                      <ul class="dropdown-menu">
                        <li class="header">你有 10 条通知</li>
                        <li>
                          <!-- inner menu: contains the actual data -->
                          <ul class="menu">
                            <li>
                              <a href="#">
                                <i class="fa fa-users text-aqua"></i> 今日 5 名新进会员加入
                              </a>
                            </li>
                          </ul>
                        </li>
                        <li class="footer"><a href="#">查看所有</a></li>
                      </ul>
                    </li>
                    <!-- Tasks: style can be found in dropdown.less -->
                    <li class="dropdown tasks-menu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-flag-o"></i>
                        <span class="label label-danger">9</span>
                      </a>
                      <ul class="dropdown-menu">
                        <li class="header">你有 9 项任务</li>
                        <li>
                          <!-- inner menu: contains the actual data -->
                          <ul class="menu">
                            <li><!-- Task item -->
                              <a href="#">
                                <h3>
                                  设计一些按钮
                                  <small class="pull-right">20%</small>
                                </h3>
                                <div class="progress xs">
                                  <div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                                    <span class="sr-only">20% 完成</span>
                                  </div>
                                </div>
                              </a>
                            </li><!-- end task item -->
                          </ul>
                        </li>
                        <li class="footer">
                          <a href="#">查看所有任务</a>
                        </li>
                      </ul>
                    </li>
                    <!-- User Account: style can be found in dropdown.less -->
                    <li class="dropdown user user-menu">
                      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <img src="../dist/img/user2-160x160.jpg" class="user-image" alt="用户图像">
                        <span class="hidden-xs">Alexander Pierce</span>
                      </a>
                      <ul class="dropdown-menu">
                        <!-- User image -->
                        <li class="user-header">
                          <img src="../dist/img/user2-160x160.jpg" class="img-circle" alt="用户图像">
                          <p>
                            Alexander Pierce - Web 开发人员
                            <small>注册于2012年11月</small>
                          </p>
                        </li>
                        <!-- Menu Body -->
                        <li class="user-body">
                          <div class="col-xs-4 text-center">
                            <a href="#">关注</a>
                          </div>
                          <div class="col-xs-4 text-center">
                            <a href="#">销售</a>
                          </div>
                          <div class="col-xs-4 text-center">
                            <a href="#">好友</a>
                          </div>
                        </li>
                        <!-- Menu Footer-->
                        <li class="user-footer">
                          <div class="pull-left">
                            <a href="#" class="btn btn-default btn-flat">资料</a>
                          </div>
                          <div class="pull-right">
                            <a href="#" class="btn btn-default btn-flat">退出</a>
                          </div>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </div>
              </nav>
            </header>
          </div>
        </div>
        <pre class="prettyprint">&LT;header class="main-header">
        &LT;a href="../../index2.html" class="logo">
          &LT;!-- LOGO -->
          AdminLTE
        &LT;/a>
        &LT;!-- Header Navbar: style can be found in header.less -->
        &LT;nav class="navbar navbar-static-top" role="navigation">
          &LT;!-- Navbar Right Menu -->
          &LT;div class="navbar-custom-menu">
            &LT;ul class="nav navbar-nav">
              &LT;!-- Messages: style can be found in dropdown.less-->
              &LT;li class="dropdown messages-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;i class="fa fa-envelope-o">&LT;/i>
                  &LT;span class="label label-success">4&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;li class="header">You have 4 messages&LT;/li>
                  &LT;li>
                    &LT;!-- inner menu: contains the actual data -->
                    &LT;ul class="menu">
                      &LT;li>&LT;!-- start message -->
                        &LT;a href="#">
                          &LT;div class="pull-left">
                            &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="用户图像">
                          &LT;/div>
                          &LT;h4>
                            Sender Name
                            &LT;small>&LT;i class="fa fa-clock-o">&LT;/i> 5 mins&LT;/small>
                          &LT;/h4>
                          &LT;p>Message Excerpt&LT;/p>
                        &LT;/a>
                      &LT;/li>&LT;!-- end message -->
                      ...
                    &LT;/ul>
                  &LT;/li>
                  &LT;li class="footer">&LT;a href="#">See All Messages&LT;/a>&LT;/li>
                &LT;/ul>
              &LT;/li>
              &LT;!-- Notifications: style can be found in dropdown.less -->
              &LT;li class="dropdown notifications-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;i class="fa fa-bell-o">&LT;/i>
                  &LT;span class="label label-warning">10&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;li class="header">You have 10 notifications&LT;/li>
                  &LT;li>
                    &LT;!-- inner menu: contains the actual data -->
                    &LT;ul class="menu">
                      &LT;li>
                        &LT;a href="#">
                          &LT;i class="ion ion-ios-people info">&LT;/i> Notification title
                        &LT;/a>
                      &LT;/li>
                      ...
                    &LT;/ul>
                  &LT;/li>
                  &LT;li class="footer">&LT;a href="#">View all&LT;/a>&LT;/li>
                &LT;/ul>
              &LT;/li>
              &LT;!-- Tasks: style can be found in dropdown.less -->
              &LT;li class="dropdown tasks-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;i class="fa fa-flag-o">&LT;/i>
                  &LT;span class="label label-danger">9&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;li class="header">You have 9 tasks&LT;/li>
                  &LT;li>
                    &LT;!-- inner menu: contains the actual data -->
                    &LT;ul class="menu">
                      &LT;li>&LT;!-- Task item -->
                        &LT;a href="#">
                          &LT;h3>
                            设计一些按钮
                            &LT;small class="pull-right">20%&LT;/small>
                          &LT;/h3>
                          &LT;div class="progress xs">
                            &LT;div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
                              &LT;span class="sr-only">20% Complete&LT;/span>
                            &LT;/div>
                          &LT;/div>
                        &LT;/a>
                      &LT;/li>&LT;!-- end task item -->
                      ...
                    &LT;/ul>
                  &LT;/li>
                  &LT;li class="footer">
                    &LT;a href="#">查看所有任务&LT;/a>
                  &LT;/li>
                &LT;/ul>
              &LT;/li>
              &LT;!-- User Account: style can be found in dropdown.less -->
              &LT;li class="dropdown user user-menu">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">
                  &LT;img src="dist/img/user2-160x160.jpg" class="user-image" alt="用户图像">
                  &LT;span class="hidden-xs">Alexander Pierce&LT;/span>
                &LT;/a>
                &LT;ul class="dropdown-menu">
                  &LT;!-- User image -->
                  &LT;li class="user-header">
                    &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="用户图像">
                    &LT;p>
                      Alexander Pierce - Web 开发人员
                      &LT;small>Member since Nov. 2012&LT;/small>
                    &LT;/p>
                  &LT;/li>
                  &LT;!-- Menu Body -->
                  &LT;li class="user-body">
                    &LT;div class="col-xs-4 text-center">
                      &LT;a href="#">Followers&LT;/a>
                    &LT;/div>
                    &LT;div class="col-xs-4 text-center">
                      &LT;a href="#">Sales&LT;/a>
                    &LT;/div>
                    &LT;div class="col-xs-4 text-center">
                      &LT;a href="#">Friends&LT;/a>
                    &LT;/div>
                  &LT;/li>
                  &LT;!-- Menu Footer-->
                  &LT;li class="user-footer">
                    &LT;div class="pull-left">
                      &LT;a href="#" class="btn btn-default btn-flat">Profile&LT;/a>
                    &LT;/div>
                    &LT;div class="pull-right">
                      &LT;a href="#" class="btn btn-default btn-flat">Sign out&LT;/a>
                    &LT;/div>
                  &LT;/li>
                &LT;/ul>
              &LT;/li>
            &LT;/ul>
          &LT;/div>
        &LT;/nav>
      &LT;/header></pre>
        <h4>顶部导航布局，主标题示例</h4>
        <div class="callout callout-info lead">
          <h4>提醒！</h4>
          <p>要使用主标题而不是常规标题，需要将<code>layout-top-nav</code>类添加到body 标签中。</p>
        </div>
        <div class="box box-solid">
          <div class="box-body layout-top-nav">
            <span class="eg">顶部导航示例</span>
            <header class="main-header">
              <nav class="navbar navbar-static-top">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <a href="../../index2.html" class="navbar-brand"><b>Admin</b>LTE</a>
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                      <i class="fa fa-bars"></i>
                    </button>
                  </div>

                  <!-- Collect the nav links, forms, and other content for toggling -->
                  <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav">
                      <li class="active"><a href="#">链接 <span class="sr-only">（当前）</span></a></li>
                      <li><a href="#">链接</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">操作</a></li>
                          <li><a href="#">另一个操作</a></li>
                          <li><a href="#">其他操作</a></li>
                          <li class="divider"></li>
                          <li><a href="#">分隔链接</a></li>
                          <li class="divider"></li>
                          <li><a href="#">分隔后的链接</a></li>
                        </ul>
                      </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                      <div class="form-group">
                        <input type="text" class="form-control" id="navbar-search-input" placeholder="搜索">
                      </div>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                      <li><a href="#">链接</a></li>
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                          <li><a href="#">操作</a></li>
                          <li><a href="#">另一个操作</a></li>
                          <li><a href="#">其他操作</a></li>
                          <li class="divider"></li>
                          <li><a href="#">分隔链接</a></li>
                        </ul>
                      </li>
                    </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
              </nav>
            </header>
          </div>
        </div>
        <pre class="prettyprint">
      &LT;header class="main-header">
        &LT;nav class="navbar navbar-static-top">
          &LT;div class="container-fluid">
          &LT;div class="navbar-header">
            &LT;a href="../../index2.html" class="navbar-brand">&LT;b>Admin&LT;/b>LTE&LT;/a>
            &LT;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
              &LT;i class="fa fa-bars">&LT;/i>
            &LT;/button>
          &LT;/div>

          &LT;!-- Collect the nav links, forms, and other content for toggling -->
          &LT;div class="collapse navbar-collapse" id="navbar-collapse">
            &LT;ul class="nav navbar-nav">
              &LT;li class="active">&LT;a href="#">Link &LT;span class="sr-only">(current)&LT;/span>&LT;/a>&LT;/li>
              &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
              &LT;li class="dropdown">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
                &LT;ul class="dropdown-menu" role="menu">
                  &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
                  &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
                  &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
                  &LT;li class="divider">&LT;/li>
                  &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
                  &LT;li class="divider">&LT;/li>
                  &LT;li>&LT;a href="#">One more separated link&LT;/a>&LT;/li>
                &LT;/ul>
              &LT;/li>
            &LT;/ul>
            &LT;form class="navbar-form navbar-left" role="search">
              &LT;div class="form-group">
                &LT;input type="text" class="form-control" id="navbar-search-input" placeholder="搜索">
              &LT;/div>
            &LT;/form>
            &LT;ul class="nav navbar-nav navbar-right">
              &LT;li>&LT;a href="#">Link&LT;/a>&LT;/li>
              &LT;li class="dropdown">
                &LT;a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown &LT;span class="caret">&LT;/span>&LT;/a>
                &LT;ul class="dropdown-menu" role="menu">
                  &LT;li>&LT;a href="#">Action&LT;/a>&LT;/li>
                  &LT;li>&LT;a href="#">Another action&LT;/a>&LT;/li>
                  &LT;li>&LT;a href="#">Something else here&LT;/a>&LT;/li>
                  &LT;li class="divider">&LT;/li>
                  &LT;li>&LT;a href="#">Separated link&LT;/a>&LT;/li>
                &LT;/ul>
              &LT;/li>
            &LT;/ul>
          &LT;/div>&LT;!-- /.navbar-collapse -->
          &LT;/div>&LT;!-- /.container-fluid -->
        &LT;/nav>
      &LT;/header></pre>

        <!-- ===================================================================== -->

        <h3 id="component-sidebar">侧边栏</h3>
        <p class="lead">
          示例参见，页面左侧的侧边栏。
          创建侧边栏
        </p>
        <pre class="prettyprint">
      &LT;div class="main-sidebar">
        &LT;!-- Inner sidebar -->
        &LT;div class="sidebar">
          &LT;!-- user panel (Optional) -->
          &LT;div class="user-panel">
            &LT;div class="pull-left image">
              &LT;img src="dist/img/user2-160x160.jpg" class="img-circle" alt="用户图像">
            &LT;/div>
            &LT;div class="pull-left info">
              &LT;p>User Name&LT;/p>

              &LT;a href="#">&LT;i class="fa fa-circle text-success">&LT;/i> Online&LT;/a>
            &LT;/div>
          &LT;/div>&LT;!-- /.user-panel -->

          &LT;!-- Search Form (Optional) -->
          &LT;form action="#" method="get" class="sidebar-form">
            &LT;div class="input-group">
              &LT;input type="text" name="q" class="form-control" placeholder="搜索...">
              &LT;span class="input-group-btn">
                &LT;button type="submit" name="search" id="search-btn" class="btn btn-flat">&LT;i class="fa fa-search">&LT;/i>&LT;/button>
              &LT;/span>
            &LT;/div>
          &LT;/form>&LT;!-- /.sidebar-form -->

          &LT;!-- Sidebar Menu -->
          &LT;ul class="sidebar-menu">
            &LT;li class="header">HEADER&LT;/li>
            &LT;!-- Optionally, you can add icons to the links -->
            &LT;li class="active">&LT;a href="#">&LT;span>Link&LT;/span>&LT;/a>&LT;&LT;/li>
            &LT;li>&LT;a href="#">&LT;span>Another Link&LT;/span>&LT;/a>&LT;/li>
            &LT;li class="treeview">
              &LT;a href="#">&LT;span>Multilevel&LT;/span> &LT;i class="fa fa-angle-left pull-right">&LT;/i>&LT;/a>
              &LT;ul class="treeview-menu">
                &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
                &LT;li>&LT;a href="#">Link in level 2&LT;/a>&LT;/li>
              &LT;/ul>
            &LT;/li>
          &LT;/ul>&LT;!-- /.sidebar-menu -->

        &LT;/div>&LT;!-- /.sidebar -->
      &LT;/div>&LT;!-- /.main-sidebar --></pre>

        <h3 id="component-control-sidebar">控制栏</h3>
        <p class="lead">控制栏右侧。
          它的用途很广且很容易创建。
        侧边栏有显示/隐藏样式。对于第1个，是滑过内容，不占用空间。另外一个，将占用空间。
        通过<a href="#adminlte-options">Javascript 选项</a>进行设置。</p>
        <p class="lead">下面代码放在<code>.wrapper</code> div 中。
        我喜欢放在页面底部。</p>
        <p class="lead">暗色侧边栏标记</p>
      <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
      &LT;aside class="control-sidebar control-sidebar-dark">
        &LT;!-- Content of the sidebar goes here -->
      &LT;/aside>
      &LT;!-- The sidebar's background -->
      &LT;!-- This div must placed right after the sidebar for it to work-->
      &LT;div class="control-sidebar-bg">&LT;/div></code></pre>

        <p class="lead">亮色侧边栏标记</p>
      <pre class="prettyprint"><code class="lang-html">&LT;!-- The Right Sidebar -->
      &LT;aside class="control-sidebar control-sidebar-light">
        &LT;!-- Content of the sidebar goes here -->
      &LT;/aside>
      &LT;!-- The sidebar's background -->
      &LT;!-- This div must placed right after the sidebar for it to work-->
      &LT;div class="control-sidebar-bg">&LT;/div></code></pre>

        <p class="lead">创建侧边栏后，
        你需要一个通过按钮来控制打开或关闭它。
        将属性<code>data-toggle="control-sidebar"</code> 添加到任何按钮上，将会自动实现控制操作。</p>

        <p class="lead">切换按钮示例</p>
        <button class="btn btn-primary" data-toggle="control-sidebar">切换右边栏</button><br><br>

        <p class="lead">侧边栏切换标记</p>
        <pre class="prettyprint"><code class="lang-html">&LT;button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar&LT;/button></code></pre>
        <!-- ===================================================================== -->

        <h3 id="component-info-box">信息框</h3>
        <p class="lead">信息框用于显示统计代码段。信息框有两种类型。</p>
        <h4>第一种信息框</h4>
        <!-- Info Boxes -->
        <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-aqua"><i class="fa fa-envelope-o"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">消息</span>
                <span class="info-box-number">1,410</span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-green"><i class="fa fa-flag-o"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">书签</span>
                <span class="info-box-number">410</span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-yellow"><i class="fa fa-files-o"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">上传</span>
                <span class="info-box-number">13,648</span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
              <span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">喜欢</span>
                <span class="info-box-number">93,139</span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
        </div><!-- /.row -->
        <p class="lead">标记</p>
        <pre class="prettyprint"><code class="lang-html">&LT;div class="info-box">
        &LT;!-- Apply any bg-* class to to the icon to color it -->
        &LT;span class="info-box-icon bg-red">&LT;i class="fa fa-star-o">&LT;/i>&LT;/span>
        &LT;div class="info-box-content">
          &LT;span class="info-box-text">Likes&LT;/span>
          &LT;span class="info-box-number">93,139&LT;/span>
        &LT;/div>&LT;!-- /.info-box-content -->
      &LT;/div>&LT;!-- /.info-box --></code></pre>

        <h4>第二种信息框</h4>
        <div class="row">
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-aqua">
              <span class="info-box-icon"><i class="fa fa-bookmark-o"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">书签</span>
                <span class="info-box-number">41,410</span>
                <div class="progress">
                  <div class="progress-bar" style="width: 70%"></div>
                </div>
                <span class="progress-description">
                  30天内增加70%
                </span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-green">
              <span class="info-box-icon"><i class="fa fa-thumbs-o-up"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">喜欢</span>
                <span class="info-box-number">41,410</span>
                <div class="progress">
                  <div class="progress-bar" style="width: 70%"></div>
                </div>
                <span class="progress-description">
                  30天内增加70%
                </span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-yellow">
              <span class="info-box-icon"><i class="fa fa-calendar"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">活动</span>
                <span class="info-box-number">41,410</span>
                <div class="progress">
                  <div class="progress-bar" style="width: 70%"></div>
                </div>
                <span class="progress-description">
                  30天内增加70%
                </span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
          <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box bg-red">
              <span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
              <div class="info-box-content">
                <span class="info-box-text">评论</span>
                <span class="info-box-number">41,410</span>
                <div class="progress">
                  <div class="progress-bar" style="width: 70%"></div>
                </div>
                <span class="progress-description">
                  30天内增加70%
                </span>
              </div><!-- /.info-box-content -->
            </div><!-- /.info-box -->
          </div><!-- /.col -->
        </div><!-- /.row -->
        <p class="lead">标记</p>
        <pre class="prettyprint"><code class="lang-html">&LT;!-- Apply any bg-* class to to the info-box to color it -->
      &LT;div class="info-box bg-red">
        &LT;span class="info-box-icon">&LT;i class="fa fa-comments-o">&LT;/i>&LT;/span>
        &LT;div class="info-box-content">
          &LT;span class="info-box-text">Likes&LT;/span>
          &LT;span class="info-box-number">41,410&LT;/span>
          &LT;!-- The progress section is optional -->
          &LT;div class="progress">
            &LT;div class="progress-bar" style="width: 70%">&LT;/div>
          &LT;/div>
          &LT;span class="progress-description">
            30天内增加70%
          &LT;/span>
        &LT;/div>&LT;!-- /.info-box-content -->
      &LT;/div>&LT;!-- /.info-box --></code></pre>
        <p class="lead">在这些风格间切换，如果使用第一种风格，你只需要将 bg-* 类添加到图标本身；
          对于另一种风格，添加 bg-* 类到信息框的 div 中即可。</p>
        <!-- ===================================================================== -->

        <h3 id="component-box">盒子</h3>
        <p class="lead">盒子组件使用很广泛。
          从显示图表到文本块；
          它有多种风格，下面将进行介绍。</p>
        <h4>默认标记</h4>
        <div class="box">
          <div class="box-header with-border">
            <h3 class="box-title">默认示例</h3>
            <div class="box-tools pull-right">
              <!-- Buttons, labels, and many other things can be placed here! -->
              <!-- Here is a label for example -->
              <span class="label label-primary">标签</span>
            </div><!-- /.box-tools -->
          </div><!-- /.box-header -->
          <div class="box-body">
            内容部分
          </div><!-- /.box-body -->
          <div class="box-footer">
            底部内容
          </div><!-- box-footer -->
        </div><!-- /.box -->
        <pre class="prettyprint">&LT;div class="box">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Default Box Example&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;!-- Buttons, labels, and many other things can be placed here! -->
            &LT;!-- Here is a label for example -->
            &LT;span class="label label-primary">Label&LT;/span>
          &LT;/div>&LT;!-- /.box-tools -->
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          内容部分
        &LT;/div>&LT;!-- /.box-body -->
        &LT;div class="box-footer">
          底部内容
        &LT;/div>&LT;!-- box-footer -->
      &LT;/div>&LT;!-- /.box --></pre>
        <h4>盒子变体</h4>
        <p class="lead">您可以通过添加box相关的类来更改样式。</p>
        <div class="row">
          <div class="col-md-4">
            <div class="box">
              <div class="box-header with-border">
                <h3 class="box-title">默认示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-primary">
              <div class="box-header with-border">
                <h3 class="box-title">重要消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-info">
              <div class="box-header with-border">
                <h3 class="box-title">普通样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="clearfix"></div>
          <div class="col-md-4">
            <div class="box box-warning">
              <div class="box-header with-border">
                <h3 class="box-title">警告样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-success">
              <div class="box-header with-border">
                <h3 class="box-title">成功样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-danger">
              <div class="box-header with-border">
                <h3 class="box-title">危险样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
        </div><!-- /.row -->
        <pre class="prettyprint">&LT;div class="box box-default">...&LT;/div>
      &LT;div class="box box-primary">...&LT;/div>
      &LT;div class="box box-info">...&LT;/div>
      &LT;div class="box box-warning">...&LT;/div>
      &LT;div class="box box-success">...&LT;/div>
      &LT;div class="box box-danger">...&LT;/div></pre>

        <h4>实心盒子</h4>
        <p class="lead">实心盒子替换原有样式的方案。
          通过将box-solid 类添加到组件中，
          来实现效果。你也可以使用其他 box 相关的类。</p>
        <div class="row">
          <div class="col-md-4">
            <div class="box box-solid box-default">
              <div class="box-header">
                <h3 class="box-title">默认示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-solid box-primary">
              <div class="box-header">
                <h3 class="box-title">重要消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-solid box-info">
              <div class="box-header">
                <h3 class="box-title">普通样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="clearfix"></div>
          <div class="col-md-4">
            <div class="box box-solid box-warning">
              <div class="box-header">
                <h3 class="box-title">警告样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-solid box-success">
              <div class="box-header">
                <h3 class="box-title">成功样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
          <div class="col-md-4">
            <div class="box box-solid box-danger">
              <div class="box-header">
                <h3 class="box-title">危险样式消息示例</h3>
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
          </div>
        </div><!-- /.row -->
        <pre class="prettyprint">
      &LT;div class="box box-solid box-default">...&LT;/div>
      &LT;div class="box box-solid box-primary">...&LT;/div>
      &LT;div class="box box-solid box-info">...&LT;/div>
      &LT;div class="box box-solid box-warning">...&LT;/div>
      &LT;div class="box box-solid box-success">...&LT;/div>
      &LT;div class="box box-solid box-danger">...&LT;/div></pre>
        <h4>盒子工具</h4>
        <p class="lead">盒子中可以包含用于部署特定事件或提供简单信息的工具。
          下面的示例使用了多个AdminLTE组件。</p>
        <p>AdminLTE 的 data-widget 属性提供了可以折叠或移除的功能。
          将按钮样式放置在box-header中。</p>
        <pre class="prettyprint">
      &LT;!-- This will cause the box to be removed when clicked -->
      &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="移除">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
      &LT;!-- This will cause the box to collapse when clicked -->
      &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="折叠">&LT;i class="fa fa-minus">&LT;/i>&LT;/button></pre>
        <div class="row">
          <div class="col-md-4">
            <div class="box box-default">
              <div class="box-header with-border">
                <h3 class="box-title">可折叠</h3>
                <div class="box-tools pull-right">
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                </div><!-- /.box-tools -->
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
            <pre class="prettyprint">
      &LT;div class="box box-default">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Collapsable&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
          &LT;/div>&LT;!-- /.box-tools -->
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          内容部分
        &LT;/div>&LT;!-- /.box-body -->
      &LT;/div>&LT;!-- /.box --></pre>
          </div>
          <div class="col-md-4">
            <div class="box box-default">
              <div class="box-header with-border">
                <h3 class="box-title">可移除</h3>
                <div class="box-tools pull-right">
                  <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div><!-- /.box-tools -->
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
            <pre class="prettyprint">
      &LT;div class="box box-default">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Removable&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
          &LT;/div>&LT;!-- /.box-tools -->
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          内容部分
        &LT;/div>&LT;!-- /.box-body -->
      &LT;/div>&LT;!-- /.box --></pre>
          </div>
          <div class="col-md-4">
            <div class="box box-default collapsed-box">
              <div class="box-header with-border">
                <h3 class="box-title">可展开</h3>
                <div class="box-tools pull-right">
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
                </div><!-- /.box-tools -->
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
            <pre class="prettyprint">
      &LT;div class="box box-default collapsed-box">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Expandable&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-plus">&LT;/i>&LT;/button>
          &LT;/div>&LT;!-- /.box-tools -->
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          内容部分
        &LT;/div>&LT;!-- /.box-body -->
      &LT;/div>&LT;!-- /.box --></pre>
          </div>
        </div><!-- /.row -->
        <p>我们还可以添加标签、徽章、分页，工具提示，输入框到盒子中。示例如下：</p>
        <div class="row">
          <div class="col-md-4">
            <div class="box box-default">
              <div class="box-header with-border">
                <h3 class="box-title">标签</h3>
                <div class="box-tools pull-right">
                  <span class="label label-default">一些标签</span>
                </div><!-- /.box-tools -->
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
            <pre class="prettyprint">
      &LT;div class="box box-default">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Labels&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;span class="label label-default">8 New Messages&LT;/span>
          &LT;/div>&LT;!-- /.box-tools -->
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          内容部分
        &LT;/div>&LT;!-- /.box-body -->
      &LT;/div>&LT;!-- /.box --></pre>
          </div>
          <div class="col-md-4">
            <div class="box box-default">
              <div class="box-header with-border">
                <h3 class="box-title">输入框</h3>
                <div class="box-tools pull-right">
                  <div class="has-feedback">
                    <input type="text" class="form-control input-sm" placeholder="搜索...">
                    <span class="glyphicon glyphicon-search form-control-feedback text-muted"></span>
                  </div>
                </div><!-- /.box-tools -->
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
            <pre class="prettyprint">
      &LT;div class="box box-default">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Input&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;div class="has-feedback">
              &LT;input type="text" class="form-control input-sm" placeholder="搜索...">
              &LT;span class="glyphicon glyphicon-search form-control-feedback">&LT;/span>
            &LT;/div>
          &LT;/div>&LT;!-- /.box-tools -->
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          内容部分
        &LT;/div>&LT;!-- /.box-body -->
      &LT;/div>&LT;!-- /.box --></pre>
          </div>
          <div class="col-md-4">
            <div class="box box-default">
              <div class="box-header with-border">
                <h3 class="box-title">按钮提示</h3>
                <div class="box-tools pull-right">
                  <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="折叠"><i class="fa fa-minus"></i></button>
                  <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="移除"><i class="fa fa-times"></i></button>
                </div><!-- /.box-tools -->
              </div><!-- /.box-header -->
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
            </div><!-- /.box -->
            <pre class="prettyprint">
      &LT;div class="box box-default">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Tooltips on buttons&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="折叠">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
            &LT;button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="移除">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
          &LT;/div>&LT;!-- /.box-tools -->
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          内容部分
        &LT;/div>&LT;!-- /.box-body -->
      &LT;/div>&LT;!-- /.box --></pre>
          </div><!-- /.col -->
        </div><!-- /.row -->
        <p>
          如果您在引入<code>app.js</code>之后添加了盒子到页面中，
          那么您必须通过调用<code>.activateBox()</code>来激活：
        </p>
        <pre class="prettyprint"><code class="html">&LT;script>
          $("#box-widget").activateBox();
      &LT;/script></code></pre>

        <h4>加载状态</h4>
        <div class="row">
          <div class="col-md-6">
            <div class="box box-default">
              <div class="box-header with-border">
                <h3 class="box-title">加载状态</h3>
              </div>
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
              <!-- Loading (remove the following to stop the loading)-->
              <div class="overlay">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <!-- end loading -->
            </div><!-- /.box -->
          </div><!-- /.col -->

          <div class="col-md-6">
            <div class="box box-default box-solid">
              <div class="box-header with-border">
                <h3 class="box-title">加载状态 (.box-solid)</h3>
              </div>
              <div class="box-body">
                内容部分
              </div><!-- /.box-body -->
              <!-- Loading (remove the following to stop the loading)-->
              <div class="overlay">
                <i class="fa fa-refresh fa-spin"></i>
              </div>
              <!-- end loading -->
            </div><!-- /.box -->
          </div><!-- /.col -->
        </div><!-- /.row -->
        <p class="lead">
          要模拟加载状态，只需将该代码放在 <code>.box</code>结束标记之前。
        </p>
        <pre class="prettyprint"><code class="html">&LT;div class="overlay">
        &LT;i class="fa fa-refresh fa-spin">&LT;/i>
      &LT;/div>
      </code></pre>
        <h3 id="component-direct-chat">聊天</h3>
        <p class="lead">聊天小部件扩展了盒子组件，
          以创建一个漂亮的聊天界面。此小部件由必需的消息窗格和可选的联系人窗格组成。示例：</p>
        <!-- Direct Chat -->
        <div class="row">
          <div class="col-md-3">
            <!-- DIRECT CHAT PRIMARY -->
            <div class="box box-primary direct-chat direct-chat-primary">
              <div class="box-header with-border">
                <h3 class="box-title">聊天</h3>
                <div class="box-tools pull-right">
                  <span data-toggle="tooltip" title="3 条新消息" class="badge bg-light-blue">3</span>
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  <button class="btn btn-box-tool" data-toggle="tooltip" title="联系" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
                  <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div><!-- /.box-header -->
              <div class="box-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp pull-right">1月23日 下午2:00</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      难以置信，这个模板真的是免费的吗？
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp pull-left">1月23日 下午 2:05</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      你要相信它！
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->
                </div><!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts">
                  <ul class="contacts-list">
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="联系人头像">
                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Count Dracula
                            <small class="contacts-list-date pull-right">2/28/2015</small>
                          </span>
                          <span class="contacts-list-msg">你最近过得怎么样？我是...</span>
                        </div><!-- /.contacts-list-info -->
                      </a>
                    </li><!-- End Contact Item -->
                  </ul><!-- /.contatcts-list -->
                </div><!-- /.direct-chat-pane -->
              </div><!-- /.box-body -->
              <div class="box-footer">
                <form action="#" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-primary btn-flat">发送</button>
                    </span>
                  </div>
                </form>
              </div><!-- /.box-footer-->
            </div><!--/.direct-chat -->
          </div><!-- /.col -->

          <div class="col-md-3">
            <!-- DIRECT CHAT SUCCESS -->
            <div class="box box-success direct-chat direct-chat-success">
              <div class="box-header with-border">
                <h3 class="box-title">聊天</h3>
                <div class="box-tools pull-right">
                  <span data-toggle="tooltip" title="3 条新消息" class="badge bg-green">3</span>
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  <button class="btn btn-box-tool" data-toggle="tooltip" title="联系" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
                  <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div><!-- /.box-header -->
              <div class="box-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp pull-right">1月23日 下午2:00</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      难以置信，这个模板真的是免费的吗？
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp pull-left">1月23日 下午 2:05</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      你要相信它！
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->
                </div><!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts">
                  <ul class="contacts-list">
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="联系人头像">
                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Count Dracula
                            <small class="contacts-list-date pull-right">2/28/2015</small>
                          </span>
                          <span class="contacts-list-msg">你最近过得怎么样？我是...</span>
                        </div><!-- /.contacts-list-info -->
                      </a>
                    </li><!-- End Contact Item -->
                  </ul><!-- /.contatcts-list -->
                </div><!-- /.direct-chat-pane -->
              </div><!-- /.box-body -->
              <div class="box-footer">
                <form action="#" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-success btn-flat">发送</button>
                    </span>
                  </div>
                </form>
              </div><!-- /.box-footer-->
            </div><!--/.direct-chat -->
          </div><!-- /.col -->

          <div class="col-md-3">
            <!-- DIRECT CHAT WARNING -->
            <div class="box box-warning direct-chat direct-chat-warning">
              <div class="box-header with-border">
                <h3 class="box-title">聊天</h3>
                <div class="box-tools pull-right">
                  <span data-toggle="tooltip" title="3 条新消息" class="badge bg-yellow">3</span>
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  <button class="btn btn-box-tool" data-toggle="tooltip" title="联系" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
                  <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div><!-- /.box-header -->
              <div class="box-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp pull-right">1月23日 下午2:00</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      难以置信，这个模板真的是免费的吗？
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp pull-left">1月23日 下午 2:05</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      你要相信它！
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->
                </div><!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts">
                  <ul class="contacts-list">
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="联系人头像">
                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Count Dracula
                            <small class="contacts-list-date pull-right">2/28/2015</small>
                          </span>
                          <span class="contacts-list-msg">你最近过得怎么样？我是...</span>
                        </div><!-- /.contacts-list-info -->
                      </a>
                    </li><!-- End Contact Item -->
                  </ul><!-- /.contatcts-list -->
                </div><!-- /.direct-chat-pane -->
              </div><!-- /.box-body -->
              <div class="box-footer">
                <form action="#" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-warning btn-flat">发送</button>
                    </span>
                  </div>
                </form>
              </div><!-- /.box-footer-->
            </div><!--/.direct-chat -->
          </div><!-- /.col -->

          <div class="col-md-3">
            <!-- DIRECT CHAT DANGER -->
            <div class="box box-danger direct-chat direct-chat-danger">
              <div class="box-header with-border">
                <h3 class="box-title">聊天</h3>
                <div class="box-tools pull-right">
                  <span data-toggle="tooltip" title="3 条新消息" class="badge bg-red">3</span>
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  <button class="btn btn-box-tool" data-toggle="tooltip" title="联系" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
                  <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div><!-- /.box-header -->
              <div class="box-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp pull-right">1月23日 下午2:00</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      难以置信，这个模板真的是免费的吗？
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp pull-left">1月23日 下午 2:05</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      你要相信它！
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->
                </div><!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts">
                  <ul class="contacts-list">
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="联系人头像">
                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Count Dracula
                            <small class="contacts-list-date pull-right">2/28/2015</small>
                          </span>
                          <span class="contacts-list-msg">你最近过得怎么样？我是...</span>
                        </div><!-- /.contacts-list-info -->
                      </a>
                    </li><!-- End Contact Item -->
                  </ul><!-- /.contatcts-list -->
                </div><!-- /.direct-chat-pane -->
              </div><!-- /.box-body -->
              <div class="box-footer">
                <form action="#" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-danger btn-flat">发送</button>
                    </span>
                  </div>
                </form>
              </div><!-- /.box-footer-->
            </div><!--/.direct-chat -->
          </div><!-- /.col -->
        </div><!-- /.row -->
        <p class="lead">聊天标记</p>
        <pre class="prettyprint"><code class="html">
      &LT;!-- Construct the box with style you want. Here we are using box-danger -->
      &LT;!-- Then add the class direct-chat and choose the direct-chat-* contexual class -->
      &LT;!-- The contextual class should match the box, so we are using direct-chat-danger -->
      &LT;div class="box box-danger direct-chat direct-chat-danger">
        &LT;div class="box-header with-border">
          &LT;h3 class="box-title">Direct Chat&LT;/h3>
          &LT;div class="box-tools pull-right">
            &LT;span data-toggle="tooltip" title="3 条新消息" class="badge bg-red">3&LT;/span>
            &LT;button class="btn btn-box-tool" data-widget="collapse">&LT;i class="fa fa-minus">&LT;/i>&LT;/button>
            &LT;!-- In box-tools add this button if you intend to use the contacts pane -->
            &LT;button class="btn btn-box-tool" data-toggle="tooltip" title="联系" data-widget="chat-pane-toggle">&LT;i class="fa fa-comments">&LT;/i>&LT;/button>
            &LT;button class="btn btn-box-tool" data-widget="remove">&LT;i class="fa fa-times">&LT;/i>&LT;/button>
          &LT;/div>
        &LT;/div>&LT;!-- /.box-header -->
        &LT;div class="box-body">
          &LT;!-- Conversations are loaded here -->
          &LT;div class="direct-chat-messages">
            &LT;!-- Message. Default to the left -->
            &LT;div class="direct-chat-msg">
              &LT;div class="direct-chat-info clearfix">
                &LT;span class="direct-chat-name pull-left">Alexander Pierce&LT;/span>
                &LT;span class="direct-chat-timestamp pull-right">23 Jan 2:00 pm&LT;/span>
              &LT;/div>&LT;!-- /.direct-chat-info -->
              &LT;img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息头像">&LT;!-- /.direct-chat-img -->
              &LT;div class="direct-chat-text">
                难以置信，这个模板真的是免费的吗？
              &LT;/div>&LT;!-- /.direct-chat-text -->
            &LT;/div>&LT;!-- /.direct-chat-msg -->

            &LT;!-- Message to the right -->
            &LT;div class="direct-chat-msg right">
              &LT;div class="direct-chat-info clearfix">
                &LT;span class="direct-chat-name pull-right">Sarah Bullock&LT;/span>
                &LT;span class="direct-chat-timestamp pull-left">23 Jan 2:05 pm&LT;/span>
              &LT;/div>&LT;!-- /.direct-chat-info -->
              &LT;img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息头像">&LT;!-- /.direct-chat-img -->
              &LT;div class="direct-chat-text">
                你要相信它！
              &LT;/div>&LT;!-- /.direct-chat-text -->
            &LT;/div>&LT;!-- /.direct-chat-msg -->
          &LT;/div>&LT;!--/.direct-chat-messages-->

          &LT;!-- Contacts are loaded here -->
          &LT;div class="direct-chat-contacts">
            &LT;ul class="contacts-list">
              &LT;li>
                &LT;a href="#">
                  &LT;img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="联系人头像">
                  &LT;div class="contacts-list-info">
                    &LT;span class="contacts-list-name">
                      Count Dracula
                      &LT;small class="contacts-list-date pull-right">2/28/2015&LT;/small>
                    &LT;/span>
                    &LT;span class="contacts-list-msg">How have you been? I was...&LT;/span>
                  &LT;/div>&LT;!-- /.contacts-list-info -->
                &LT;/a>
              &LT;/li>&LT;!-- End Contact Item -->
            &LT;/ul>&LT;!-- /.contatcts-list -->
          &LT;/div>&LT;!-- /.direct-chat-pane -->
        &LT;/div>&LT;!-- /.box-body -->
        &LT;div class="box-footer">
          &LT;div class="input-group">
            &LT;input type="text" name="message" placeholder="输入消息 ..." class="form-control">
            &LT;span class="input-group-btn">
              &LT;button type="button" class="btn btn-danger btn-flat">Send&LT;/button>
            &LT;/span>
          &LT;/div>
        &LT;/div>&LT;!-- /.box-footer-->
      &LT;/div>&LT;!--/.direct-chat -->
      </code></pre>

        <p>当然，你也可以直接将<code>solid-box</code> 类应用的盒子里，下面是示例：</p>

        <!-- Direct Chat With Solid Boxes -->
        <div class="row">
          <div class="col-md-6">
            <!-- DIRECT CHAT WARNING -->
            <div class="box box-primary box-solid direct-chat direct-chat-primary">
              <div class="box-header">
                <h3 class="box-title">实心盒子聊天</h3>
                <div class="box-tools pull-right">
                  <span data-toggle="tooltip" title="3 条新消息" class="badge bg-light-blue">3</span>
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  <button class="btn btn-box-tool" data-toggle="tooltip" title="联系" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
                  <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div><!-- /.box-header -->
              <div class="box-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp pull-right">1月23日 下午2:00</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      难以置信，这个模板真的是免费的吗？
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp pull-left">1月23日 下午 2:05</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      你要相信它！
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->
                </div><!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts">
                  <ul class="contacts-list">
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="联系人头像">
                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Count Dracula
                            <small class="contacts-list-date pull-right">2/28/2015</small>
                          </span>
                          <span class="contacts-list-msg">你最近过得怎么样？我是...</span>
                        </div><!-- /.contacts-list-info -->
                      </a>
                    </li><!-- End Contact Item -->
                  </ul><!-- /.contatcts-list -->
                </div><!-- /.direct-chat-pane -->
              </div><!-- /.box-body -->
              <div class="box-footer">
                <form action="#" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-primary btn-flat">发送</button>
                    </span>
                  </div>
                </form>
              </div><!-- /.box-footer-->
            </div><!--/.direct-chat -->
          </div><!-- /.col -->

          <div class="col-md-6">
            <!-- DIRECT CHAT DANGER -->
            <div class="box box-info box-solid direct-chat direct-chat-info">
              <div class="box-header">
                <h3 class="box-title">实心盒子聊天</h3>
                <div class="box-tools pull-right">
                  <span data-toggle="tooltip" title="3 条新消息" class="badge bg-aqua">3</span>
                  <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
                  <button class="btn btn-box-tool" data-toggle="tooltip" title="联系" data-widget="chat-pane-toggle"><i class="fa fa-comments"></i></button>
                  <button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div><!-- /.box-header -->
              <div class="box-body">
                <!-- Conversations are loaded here -->
                <div class="direct-chat-messages">
                  <!-- Message. Default to the left -->
                  <div class="direct-chat-msg">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-left">Alexander Pierce</span>
                      <span class="direct-chat-timestamp pull-right">1月23日 下午2:00</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user1-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      难以置信，这个模板真的是免费的吗？
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->

                  <!-- Message to the right -->
                  <div class="direct-chat-msg right">
                    <div class="direct-chat-info clearfix">
                      <span class="direct-chat-name pull-right">Sarah Bullock</span>
                      <span class="direct-chat-timestamp pull-left">1月23日 下午 2:05</span>
                    </div><!-- /.direct-chat-info -->
                    <img class="direct-chat-img" src="../dist/img/user3-128x128.jpg" alt="用户消息头像"><!-- /.direct-chat-img -->
                    <div class="direct-chat-text">
                      你要相信它！
                    </div><!-- /.direct-chat-text -->
                  </div><!-- /.direct-chat-msg -->
                </div><!--/.direct-chat-messages-->

                <!-- Contacts are loaded here -->
                <div class="direct-chat-contacts">
                  <ul class="contacts-list">
                    <li>
                      <a href="#">
                        <img class="contacts-list-img" src="../dist/img/user1-128x128.jpg" alt="联系人头像">
                        <div class="contacts-list-info">
                          <span class="contacts-list-name">
                            Count Dracula
                            <small class="contacts-list-date pull-right">2/28/2015</small>
                          </span>
                          <span class="contacts-list-msg">你最近过得怎么样？我是...</span>
                        </div><!-- /.contacts-list-info -->
                      </a>
                    </li><!-- End Contact Item -->
                  </ul><!-- /.contatcts-list -->
                </div><!-- /.direct-chat-pane -->
              </div><!-- /.box-body -->
              <div class="box-footer">
                <form action="#" method="post">
                  <div class="input-group">
                    <input type="text" name="message" placeholder="输入消息 ..." class="form-control">
                    <span class="input-group-btn">
                      <button type="button" class="btn btn-info btn-flat">发送</button>
                    </span>
                  </div>
                </form>
              </div><!-- /.box-footer-->
            </div><!--/.direct-chat -->
          </div><!-- /.col -->
        </div><!-- /.row -->
      </section>


      <!-- ============================================================= -->

      <section id="plugins">
        <h2 class="page-header"><a href="#plugins">插件</a></h2>
        <p class="lead">AdminLTE使用以下插件。相关文档，更新或许可信息，请访问提供的链接。</p>
        <div class="row bring-up">
          <div class="col-sm-3">
            <ul class="list-unstyled">
              <li><h4>图表</h4></li>
              <li><a href="http://www.chartjs.org/" target="_blank">ChartJS</a></li>
              <li><a href="http://www.flotcharts.org/" target="_blank">Flot</a></li>
              <li><a href="http://morrisjs.github.io/morris.js/" target="_blank">Morris.js</a></li>
              <li><a href="http://omnipotent.net/jquery.sparkline/" target="_blank">Sparkline</a></li>
            </ul>
          </div><!-- /.col -->
          <div class="col-sm-3">
            <ul class="list-unstyled">
              <li><h4>表单元素</h4></li>
              <li><a href="https://github.com/seiyria/bootstrap-slider/">Bootstrap Slider</a></li>
              <li><a href="http://ionden.com/a/plugins/ion.rangeSlider/en.html" target="_blank">Ion Slider</a></li>
              <li><a href="http://bootstrap-datepicker.readthedocs.org/" target="_blank">Date Picker</a></li>
              <li><a href="http://www.daterangepicker.com/" target="_blank">Date Range Picker</a></li>
              <li><a href="http://mjolnic.com/bootstrap-colorpicker/" target="_blank">Color Picker</a></li>
              <li><a href="https://github.com/jdewit/bootstrap-timepicker/" target="_blank">Time Picker</a></li>
              <li><a href="http://fronteed.com/iCheck/" target="_blank">iCheck</a></li>
              <li><a href="https://github.com/RobinHerbots/jquery.inputmask/" target="_blank">Input Mask</a></li>
            </ul>
          </div><!-- /.col -->
          <div class="col-sm-3">
            <ul class="list-unstyled">
              <li><h4>编辑器</h4></li>
              <li><a href="https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg/" target="_blank">Bootstrap WYSIHTML5</a></li>
              <li><a href="http://ckeditor.com/" target="_blank">CK Editor</a></li>
            </ul>
          </div><!-- /. col -->
          <div class="col-sm-3">
            <ul class="list-unstyled">
              <li><h4>其它</h4></li>
              <li><a href="https://datatables.net/examples/styling/bootstrap.html" target="_blank">DataTables</a></li>
              <li><a href="http://fullcalendar.io/" target="_blank">Full Calendar</a></li>
              <li><a href="http://jqueryui.com/" target="_blank">jQuery UI</a></li>
              <li><a href="http://anthonyterrien.com/knob/" target="_blank">jQuery Knob</a></li>
              <li><a href="http://jvectormap.com/" target="_blank">jVector Map</a></li>
              <li><a href="http://rocha.la/jQuery-slimScroll/" target="_blank">Slim Scroll</a></li>
              <li><a href="http://github.hubspot.com/pace/docs/welcome/" target="_blank">Pace</a></li>
            </ul>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </section>


      <!-- ============================================================= -->

      <section id="browsers">
        <h2 class="page-header"><a href="#browsers">浏览器支持</a></h2>
        <p class="lead">AdminLTE支持以下浏览器：</p>
        <ul>
          <li>IE9+</li>
          <li>Firefox （最新）</li>
          <li>Safari （最新）</li>
          <li>Chrome （最新）</li>
          <li>Opera （最新）</li>
        </ul>
        <p><b>提示：</b> IE9 不支持过渡或动画。模板仍会正常工作，但不会启用过渡或动画效果。</p>
      </section>


      <!-- ============================================================= -->

      <section id="upgrade">
        <h2 class="page-header"><a href="#upgrade">升级指南</a></h2>
        <p class="lead">要从1.x升级到最新版本，请遵循本指南。</p>
        <h3>新文件</h3>
        <p>确保更新所有与AdminLTE相关的CSS和JS文件。
          否则，布局将正常使用。最重要的文件是AdminLTE.css，皮肤CSS文件和app.js。</p>
        <h3>布局调整</h3>
        <ol>
          <li>.wrapper div必须放在 body 标签之后，而不是放在header之后</li>
          <li>修改div .header 为 .main-header <code>&LT;div class="main-header"></code></li>
          <li>修改 .right-side 类为 .content-wrapper <code>&LT;div class="content-wrapper"></code></li>
          <li>修改 .left-side 类为 .main-sidebar <code>&LT;div class="main-sidebar"></code></li>
          <li>在导航栏中，将 .navbar-right 修改为 .navbar-custom-menu <code>&LT;div class="navbar-custom-menu"></code></li>
        </ol>
        <h3>导航栏自定义下拉菜单</h3>
        <ol>
          <li>通知菜单中的图标不需要使用 bg-* 类。会使用当前颜色，例如text-aqua或text-red。</li>
        </ol>
        <h3>登录，注册和锁屏页面</h3>
        <p>这些页面的HTML标记和样式有很大的变化。最好的方法是复制页面代码再修改它。</p>
        <p>你该着手去做！</p>
        <h3>邮箱</h3>
        <p>邮箱升级包含了三个不同的页面。 分别是收件箱，阅读邮件和撰写新邮件。
          要使用这些页面，你可以pages/mailbox目录下找到。</p>
        <p><b class="text-red">提示：</b> 旧的邮箱布局已被弃用，为了便于使用新布局将在下一个版本中删除。</p>
      </section>


      <!-- ============================================================= -->

      <section id="implementations">
        <h2 class="page-header"><a href="#implementations">实现</a></h2>
        <p class="lead">感谢AdminLTE用户将模板与后端框架集成，
        以下是部分，感谢他们：</p>

        <ul>
          <li><a href="https://github.com/mmdsharifi/AdminLTE-RTL">Persian RTL</a> by <a href="https://github.com/mmdsharifi">Mohammad Sharifi</a></li>
          <li><a href="https://github.com/dmstr/yii2-adminlte-asset" target="_blank">Yii 2</a> by <a href="https://github.com/schmunk42" target="_blank">Tobias Munk</a></li>
          <li><a href="https://github.com/yajra/laravel-admin-template" target="_blank">Laravel</a> by <a href="https://github.com/yajra" target="_blank">Arjay Angeles</a></li>
          <li><a href="https://github.com/acacha/adminlte-laravel" target="_blank">Laravel 5 package</a> by <a href="https://github.com/acacha" target="_blank">Sergi Tur Badenas</a></li>
          <li><a href="https://github.com/jeroennoten/Laravel-AdminLTE" target="_blank">Laravel-AdminLTE</a> by <a href="https://github.com/jeroennoten" target="_blank">Jeroen Noten</a></li>
          <li><a href="https://github.com/avanzu/AdminThemeBundle" target="_blank">Symfony</a> by <a href="https://github.com/avanzu" target="_blank">Marc Bach</a></li>
          <li>Rails gems: <a href="https://github.com/nicolas-besnard/adminlte2-rails" target="_blank">adminlte2-rails</a> by <a href="https://github.com/nicolas-besnard" target="_blank">Nicolas Besnard</a> and <a href="https://github.com/racketlogger/lte-rails" target="_blank">lte-rails</a> (using AdminLTE sources) by <a href="https://github.com/racketlogger" target="_blank">Carlos at RacketLogger</a></li>
          <li><a href="https://github.com/misterGF/CoPilot" target="_blank">CoPilot (AdminLTE with Vue.js)</a> by<a href="https://github.com/misterGF" target="_blank">Gil Ferreira</a></li>
        </ul>

        <p><b class="text-red">注意：</b> Almsaeed Studio不支持这些实现。
          但是，它们提供了将AdminLTE集成到不同框架中示例。
          of AdminLTE, please visit our <a href="https://github.com/almasaeed2010/AdminLTE">repository</a> or <a href="https://adminlte.io">website</a></p>
      </section>


      <!-- ============================================================= -->

      <section id="faq">
        <h2 class="page-header"><a href="#faq">常问问题</a></h2>
        <h3>AdminLTE可以与Wordpress一起使用吗？</h3>
        <p class="lead">AdminLTE是一个HTML模板，可以用于任何目的。 但它不容易安装在Wordpress上。你需要多些努力及足够的Wordpress脚本知识。</p>

        <h3>有没有PHP框架的集成指南，如Yii或Symfony？</h3>
        <p class="lead">简短的说，没有。 不过上，网络上有forks和教程，它提供了如何与框架集成的信息。甚至还有AdminLTE与jQuery ajax，AngularJS或MVC5 ASP .NET集成在一起。</p>

        <h3>如何获得新版通知？</h3>
        <p class="lead">The best option is to subscribe to our mailing list using the <a href="https://adminlte.io/#subscribe">subscription form on Almsaeed Studio</a>.
          If that's not appealing to you, you may watch the <a href="https://github.com/almasaeed2010/AdminLTE">repository on Github</a> or visit <a href="https://adminlte.io">Almsaeed Studio</a> every now and then for updates and announcements.</p>
      </section>


      <!-- ============================================================= -->

      <section id="license">
        <h2 class="page-header"><a href="#license">许可证</a></h2>
        <h3>AdminLTE</h3>
        <p class="lead">
          AdminLTE是根据<a href="http://opensource.org/licenses/MIT">MIT许可证</a>授权的开源项目。
          只要您在“软件的所有副本或大部分内容”中包含版权，
          您就可以做任何事情。
          署名不是必需的（尽管非常感谢）。
        </p>
      </section>


    </div><!-- /.content -->
  </div><!-- /.content-wrapper -->

  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 2.3.12
    </div>
    <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
    reserved.
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <div class="pad">
      这是控制侧边栏的例子。
    </div>
  </aside><!-- /.control-sidebar -->
  <!-- 添加侧边栏的背景。
       这个 div必须放在 control-sidebar 之后 -->
  <div class="control-sidebar-bg"></div>

</div><!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<!-- SlimScroll -->
<script src="../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script src="docs.js"></script>
</body>
</html>
